<template>
  <header class="bg-white shadow-md">
  <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
    <div class="flex lg:flex-1">
      <a href="#" class="">
        富宁县国有资本经营集团有限公司
        <!-- <span >Your Company</span> -->
        <!-- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt=""> -->
      </a>
    </div>
   
    <!-- <div class=" lg:flex ">
      <div class="text-sm font-semibold cursor leading-6 p-4 text-gray-900 hover:bg-gray-200" v-for="item in list"  @click="$emit('handleClick', item)"><NuxtLink v-if="item.data !== '注册/登录' " :to="item.path">{{ item.data }}</NuxtLink></div>
    </div> -->
    <div class=" lg:flex lg:flex-1 lg:justify-end">
      <!-- 如果用户未登录 -->
      <div v-show="!user" class="flex items-center space-x-4">
        <div class="text-sm font-semibold cursor leading-6 p-4 text-gray-900 hover:bg-gray-200" v-for="item in list"  @click="$emit('handleClick', item)">
          <NuxtLink v-if="item.data == '注册/登录' " :to="item.path">{{ item.data }}</NuxtLink>
        </div>
      </div>
      <!-- 如果用户已登录 -->
      <div class="relative" v-show="user">
        <button type="button" @click="handleSettings" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
          <img class="h-8 w-8 rounded-full" :src="'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'" alt="">
        </button>
        <div v-if="settingsStatus" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
          <span v-for="(item, index) in settings" class="cursor block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
            <NuxtLink :to="item.path" class="block"> {{ item.name }}</NuxtLink>
          </span>
        </div>
      </div>
    </div>
  </nav>
</header>

</template>

<script lang="ts" setup>
import { useDataStore } from '~/stores/data'
import { login  } from '~/api/users';
const data = useDataStore()
const list = data.data.map(item => ({
  path: item.path,
  data: String.fromCodePoint(...item.data)
}))

import { useAuthStore } from '~/stores/auth'
const authStore = useAuthStore()
// 获取当前用户状态
// const user = (JSON.parse(authStore.user));
const user = computed(() => JSON.parse(authStore.user));
const id = computed(() => authStore._id);

// 确保在组件挂载时，authStore 已经初始化
onMounted(() => {
  if (typeof window !== 'undefined') {
    const token = localStorage.getItem('authToken');
    const user = localStorage.getItem('authUser');

    if (token) {
      authStore.setToken(token);
    }

    if (user) {
      authStore.setUser((user));
    }
  }
});

const settings = [
  { name: '我的主页', icon: '',path: '#' },
  { name: '设置',icon: '', path: '#' },
  { name: '退出',icon: '', path: '/login' },
]

const settingsStatus = ref(false)
const handleSettings = ()  => {
  settingsStatus.value = !settingsStatus.value
}



</script>

<style scoped lang="stylus">

        
</style>